.lz-width-full {
  width: 100%;
}

.lz-relative,
.lz-rela {
  position: relative;
}

.lz-absolute,
.lz-abso {
  position: absolute;
}

.lz-font-xs {
  font-size: 10px;
}

.lz-font-sm {
  font-size: 12px;
}

.lz-font-md {
  font-size: 14px;
}

.lz-font-lg {
  font-size: 16px;
}

.lz-font-xl {
  font-size: 18px;
}

.lz-flex {
  display: flex;
  flex-direction: row;
  align-items: center;
}

.lz-flex-wrap {
  flex-wrap: wrap;
}

.lz-flex-nowrap {
  flex-wrap: nowrap;
}

.lz-align-center {
  align-items: center;
}

.lz-align-top {
  align-items: flex-start;
}

.lz-align-bottom {
  align-items: flex-end;
}

.lz-justify-center {
  justify-content: center;
}

.lz-justify-left {
  justify-content: flex-start;
}

.lz-justify-right {
  justify-content: flex-end;
}

.lz-justify-between {
  justify-content: space-between;
}

.lz-justify-around {
  justify-content: space-around;
}

.lz-text-left {
  text-align: left;
}

.lz-text-center {
  text-align: center;
}

.lz-text-right {
  text-align: right;
}

//垂直显示
.lz-flex-col {
  display: flex;
  flex-direction: column;
}

// 定义flex等分
@for $i from 0 through 12 {
  .lz-flex-#{$i} {
    flex: $i;
  }
}

// 定义字体(px)单位，小于20都为px单位字体
@for $i from 9 to 40 {
  .lz-font-#{$i} {
    font-size: $i + px;
  }
}


// 定义内外边距，历遍1-80
@for $i from 0 through 80 {
  // 只要双数和能被5除尽的数
  @if $i % 2 == 0 or $i % 5 == 0 {
    // 得出：lz-margin-30或者lz-m-30
    .lz-margin-#{$i}, .lz-m-#{$i} {
      margin: $i + px!important;
    }

    // 得出：lz-padding-30或者lz-p-30
    .lz-padding-#{$i}, .lz-p-#{$i} {
      padding: $i + px!important;
    }

    @each $short, $long in l left, t top, r right, b bottom {
      // 缩写版，结果如： lz-m-l-30
      // 定义外边距
      .lz-m-#{$short}-#{$i} {
        margin-#{$long}: $i + px!important;
      }

      // 定义内边距
      .lz-p-#{$short}-#{$i} {
        padding-#{$long}: $i + px!important;
      }

      // 完整版，结果如：lz-margin-left-30
      // 定义外边距
      .lz-margin-#{$long}-#{$i} {
        margin-#{$long}: $i + px!important;
      }

      // 定义内边距
      .lz-padding-#{$long}-#{$i} {
        padding-#{$long}: $i + px!important;
      }
    }
  }
}


.text-ellipsis{
  overflow:hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  -o-text-overflow:ellipsis;
}

.search-container {
  display: flex;
  flex-wrap: wrap;
  .btn-group {
      display: flex;
      flex-wrap: wrap;
  }
}

.btn {
  height: 32px;
  line-height: 32px;
  padding: 0 15px;
  &.btn-icon {
    height: 32px;
    padding: 8px;
    line-height: 0; 
  }
}

//状态
.dict-status {
  font-size: 12px !important;
  box-sizing: border-box;
  width: 48px;
  height: 20px;
  line-height: 18px;
  text-align: center;
  border-radius: 2px;
  display: inline-block;
  &.nice {
      color: $green;
      border: 1px solid $green;
      background: rgba($color: $green, $alpha: 0.2);
  }
  &.normal {
      color: $yellow;
      border: 1px solid $yellow;
      background: rgba($color: $yellow, $alpha: 0.2);
  }
  &.bad {
      color: $red;
      border: 1px solid $red;
      background: rgba($color: $red, $alpha: 0.2);
  }
}

.point-state {
  position: relative;
  padding-left: 10px;
  &.in-dialog {
    color: $subtitleColor;
  }
  &.online {
    &:before {
      background: $green;
    }
  }
  &.warning {
    &:before {
      background: $yellow;
    }
  }
  &.error {
    &:before {
      background: $red;
    }
  }
  &.offline {
    &:before {
      background: $borderColor;
    }
  }
  &:before {
    display: block;
    content: '';
    width: 6px;
    height: 6px;
    border-radius: 100px;
    position: absolute;
    left: 0;
    top: calc(50% - 3px);
  }
}

.mb-40 {
  margin-bottom: 40px;
}
.mb-30 {
  margin-bottom: 30px;
}
.mb-20 {
  margin-bottom: 20px;
}
.mb-10 {
  margin-bottom: 10px;
}
.mt-10 {
  margin-top: 10px;
}
.mt-20 {
  margin-top: 20px;
}
.mt-30 {
  margin-top: 30px;
}
.mt-40 {
  margin-top: 40px;
}
.mt-50 {
  margin-top: 50px;
}
.mt-60 {
  margin-top: 60px;
}
.mt-70 {
  margin-top: 70px;
}
.mt-80 {
  margin-top: 80px;
}
.mt-90 {
  margin-top: 90px;
}

.el-table .hiddenCheck .cell .el-checkbox {
  display: none !important;
}

.text-overflow {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
